<template>
  <div class="music-player" v-if="song.id">
    <div class="time" :style="{ width: percent }"></div>
    <div
      class="cover"
      :class="{ playing }"
      :style="{ 'background-image': `url(${song.cover})` }"
    ></div>
    <div class="info">
      <h3 class="el">{{ song.song }}</h3>
      <p class="el">{{ song.singer }}-{{ song.album }}</p>
    </div>
    <div class="btns">
      <!-- 这里却两个按钮 -->
      <div :class="[playing ? 'pause' : 'play']" @click="togglePlay"></div>
      <div class="playlist" @click="showPlaybox = true"></div>
    </div>
    <audio :src="song.url" ref="audio" @timeupdate="onTimeupdate"></audio>

    <play-box @close="showPlaybox = false" :show="showPlaybox" />
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import PlayBox from "./PlayBox.vue";
export default {
  components: { PlayBox },
  computed: {
    // song() {
    //   return this.$store.getters.song;
    // },
    ...mapGetters(["song"]),
    ...mapState(["playing"]),



    // 算出歌曲播放了多长时间
    percent() {
      return (this.currentTime / this.song.duration) * 100 + "%";
    },
  },
  watch: {
    song() {
      const { id } = this.song;
      if (!id) return;
      this.$nextTick(() => {
        this.$refs.audio.play();
        this.$store.commit("setPlaying", true);
      });
      console.log("watch 到了", this.$store.state.playing);
    },
  },
  data() {
    return {
      currentTime: 0,
      showPlaybox: false,
    };
  },
  methods: {
    togglePlay() {
      if (this.playing) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
      this.$store.commit("setPlaying", !this.playing);
    },

    //
    onTimeupdate(e) {
      console.log(e, e.target.currentTime);
      this.currentTime = e.target.currentTime;
    },
  },
};
</script>

<style lang="sass">
.music-player
  display: flex
  align-items: center
  position: fixed
  z-index: 99
  right: 0
  bottom: 0
  left: 0
  height: 1.2rem
  background: linear-gradient(37deg, #061842 0%, #2C50A1 100%)
  box-shadow: 0 0 .2rem 0 rgba(0, 0, 0, 0.4)
  padding-left: .22rem
  padding-right: .35rem
  .cover
    width: .8rem
    height: .8rem
    border-radius: 50%
    border: 1px solid #061842
    background-repeat: no-repeat
    background-size: cover
    margin-right: .2rem
    animation: cover-rotate 5s linear infinite
    animation-play-state: paused
    &.playing
      animation-play-state: running
  .info
    flex: 1
    h3
      font-size: .28rem
    p
      font-size: .24rem
      opacity: .4
  .btns
    display: flex
    width: 2rem
    & > div
      width: 1rem
      height: 1.2rem
      background: center/.56rem no-repeat
    .play
      background-image: url(~@/assets/img/icon-play.png)
    .pause
      background-image: url(~@/assets/img/icon-pause.png)
    .playlist
      background-image: url(~@/assets/img/icon-playlist.png)
  audio
    display: none
  .time
    position: absolute
    top: 0
    left: 0
    height: 2px
    background: #fff
    // width: 50%
    box-shadow: 0 0 10px 0 #fff

@keyframes cover-rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)
</style>
